<script setup>
  import {computed} from "vue";
  import DetailSection from "@/components/detailSeciton/DetailSection.vue";

  const props = defineProps({
    houseFacility: {
      type: Object,
      default: () => ({})
    }
  })

  //显示的分类
  const sort = computed(() => props.houseFacility.facilitySort)
</script>

<template>
  <detail-section title="房屋设施" more="查看全部设施">
    <div class="detailFacilities">
      <template v-for="item in houseFacility.houseFacilitys" :key="item.groupId">
        <div class="box" v-if="sort.includes(item.groupId)">
          <div class="left">
            <img :src="item.icon" alt="图标">
            <div class="title">{{ item.groupName }}</div>
          </div>
          <div class="right">
            <template v-for="(facility,index) in item.facilitys.slice(0,4)" :key="index">
              <div class="tip">
                <van-icon name="passed" class="icon"/>
                <span>{{ facility.name }}</span>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
  </detail-section>
</template>

<style lang="less" scoped>
  .detailFacilities {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    background: #FF9645;
    background: var(--auxiliary-back-color);
    border-radius: var(--card-border-radius);
    color: rgba(19, 43, 61, 0.69);
    font-size: 12px;

    .box {
      display: flex;
      width: 100%;
      margin: 15px 0;

      .left {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        img {
          width: 22px;
        }

        .title {
          margin-top: 5px;
        }
      }

      .right {
        padding-left: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .tip {
          width: 50%;

          .icon {
            color: #16dcc3;
          }

          span {
            margin-left: 5px;
          }
        }
      }
    }
  }
</style>